<template>
<view class="camera">
  <u-sticky>
    <view class="search-box">
      <u-search
          bg-color="rgba(36,156,255,0.15)"
          search-icon-color="#2498F6"
          placeholder-color="#2498F6"
          color="#2498F6"
          :input-style="{backgroundColor: 'rgba(36,156,255,0)'}"
          placeholder="输入您搜索的摄像头" v-model="keyword" :show-action="false"></u-search>
    </view>
    <view class="camera-drop-list">
      <div class="home-drop-item " @click="openRoom">
        <span class="c-drop-name">{{ roomItem.label }}</span>
        <u-icon name="arrow-down-fill" color="#2498F6" size="24"></u-icon>
      </div>
      <div class="home-drop-item ">
        <span class="c-drop-name">正常：{{ roomDataTotal.normal }}</span>
      </div>
      <div class="home-drop-item ">
        <span class="c-drop-name" style="color: #FF1A00">异常：{{ roomDataTotal.abnormal }}</span>
      </div>
    </view>
  </u-sticky>
 <view style="padding: 20rpx">
   <u-row :gutter="20">
     <u-col :span="6" v-for="item in cameraListShow">
       <div class="camera-item">
         <div class="video"></div>
         <div class="status-box">
           <span :class="['status-text', item.status]">{{ item.name }}</span>
         </div>
       </div>
     </u-col>
   </u-row>
 </view>

  <u-select
      v-model="showRoom"
      :default-value="[defaultRoom]"
      :list="roomList"
      @cancel="showRoom = false"
      @confirm="confirmRoom">
  </u-select>
</view>
</template>
<script>
export default {
  name: "camera",
  data() {
    return {
      keyword: "",
      showRoom: false,
      roomItem: {
        label: "全部宿舍",
        value: ""
      },
      roomDataTotal: {
        normal: 0,
        abnormal: 0
      },
      cameraList: [

      ],
      roomList: [],
      roomId: '',
    }
  },
  computed: {
    cameraListShow() {
      return this.cameraList.filter(item => item.devname.includes(this.keyword))
    },
    defaultRoom() {
      return this.roomList.findIndex(item => item.value == this.roomItem.value)
    }
  },
  onLoad({ room_id }) {
    this.roomItem.value = room_id
    this.getRoomList()
  },
  methods: {
    getRoomList() {
      this.$api.getRoomList().then(res => {
        this.roomList = [
          {
            label: '全部栋舍',
            value: ''
          },
            ...res.map(item => {
              return {
                label: item.buildingno + item.buildingname,
                value: item.id
              }
            })
        ]
        if (res.length) {
          let find = this.roomList.find(item => item.value == this.roomItem.value)
          if (find) {
            this.roomItem = {
              ...find,
            }
          } else {
            this.roomItem = {
              ...this.roomList[0]
            }
          }
          this.getDeviceByRoom()
        } else {
          this.roomItem = {
            label: '全部宿舍',
            value: ''
          }
        }
      })
    },
    getDeviceByRoom() {
      this.$api.getCameraByRoom({
        room_id: this.roomItem.value,
      }).then(res => {
        this.cameraList = res.map(item => {
          return {
            ...item,
            status: item.status == 1 ? 'normal' : item.status == 2 ? 'abnormal' : 'closed'
          }
        })
        this.roomDataTotal = this.cameraList.reduce((prev, next) => {
          if (next.status == 'normal') {
            prev.normal++
          } else if (next.status == 'abnormal') {
            prev.abnormal++
          }
          return prev
        }, { normal: 0, abnormal: 0 })
      })
    },
    confirmRoom(value) {
      this.showRoom = false
      this.roomItem = {
        ...value[0]
      }
      this.getDeviceByRoom()
    },
    openRoom() {
      this.showRoom = true;
    }
  }
}
</script>
<style lang="scss">
.camera {
  height: 100%;
  overflow: auto;
  background-color: #F8F9FD;
  .search-box {
    padding: 30rpx
  }

  .camera-drop-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    padding-top: 0;
  }

  .c-drop-name {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 25rpx !important;
    color: #000000;
  }
  .camera-item {
    background-color: #fff;
    border-radius: 10rpx;
    overflow: hidden;
    height: 336.51rpx;
    position: relative;
    margin-bottom: 20rpx;

    .video {
      width: 100%;
      height: 100%;
      background-color:#676767;
    }

    .status-box {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, .42);
      .status-text {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 25rpx;
        color: #01B920;
        line-height: 56rpx;
        padding: 0 20rpx;

        &.normal {
          color: #00C853;
          // 前面圆点
          &::before {
            content: '';
            display: inline-block;
            width: 10rpx;
            height: 10rpx;
            border-radius: 50%;
            background-color: #01B920;
            margin-right: 10rpx;
          }
        }

        &.abnormal {
          color: #FF1A00;
          // 前面圆点
          &::before {
            content: '';
            display: inline-block;
            width: 10rpx;
            height: 10rpx;
            border-radius: 50%;
            background-color: #FF1A00;
            margin-right: 10rpx;
          }
        }

        &.closed {
          color: #ffffff;
          // 前面圆点
          &::before {
            content: '';
            display: inline-block;
            width: 10rpx;
            height: 10rpx;
            border-radius: 50%;
            background-color: #ffffff;
            margin-right: 10rpx;
          }
        }
      }
    }


  }
}
</style>
